<template>
  <div>
    <el-card class="category-container">
      <template #header>
        <div class="header">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="dialogFormVisible = true"
            >增加</el-button
          >
          <el-popconfirm title="确定删除吗？">
            <template #reference>
              <el-button type="danger" size="small" icon="el-icon-delete"
                >批量删除</el-button
              >
            </template>
          </el-popconfirm>
        </div>
      </template>
      <div class="goods_name_tab">
        <el-table
          ref="singleTable"
          :data="arrs"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column property="date" label="分类名称" width="660">
            <template slot-scope="scope">
              <div>
                {{ scope.row.goods_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="排序值" width="80">
            <template slot-scope="scope">
              <div>
                {{ scope.row.goods_weight }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="创建时间" width="185">
            <template slot-scope="scope">
              <div>
                {{ scope.row.add_time | filtime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column property="address" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" @click="amends(scope.row)"
                  ><i>修改</i></el-button
                >
                <el-button type="danger" @click="dels(scope.row.goods_id)"
                  ><i>删除</i></el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--总数超过一页，再展示分页器-->
      <el-pagination
        @size-change="pagesn"
        @current-change="changepage"
        :current-page="pagenum"
        :page-sizes="[1, 2, 3, 4, 5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 修改弹出层 -->
    <el-dialog title="商品修改" :visible.sync="flag">
      <el-form :model="form">
        <el-form-item label="分类名称">
          <el-input v-model="form.goods_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序值">
          <el-input v-model="form.goods_weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input
            v-model="form.goods_introduce"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称">
          <el-input v-model="form.roleName"></el-input>
        </el-form-item>
        <el-form-item label="排序值">
          <el-input v-model="form.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddFormVisible">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹出框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      arrs: [],
      arrsd: [],
      pagesize: 5, //每一页的条数
      pagenum: 1, //页码值
      total: 10, //总条数
      flag: false, //修改状态
      dialogFormVisible: false,
      // 修改数据
      form: {
        roleName: "",
        roleDesc: "",
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        id: "",
        pics: {},
        attrs: [],
      },
    };
  },
  mounted() {
    this.goodss();
  },
  methods: {
    goodss() {
      this.$http({
        url: "/goods",
        method: "get",
        params: {
          pagesize: this.pagesize,
          pagenum: this.pagenum,
          query: this.value,
        },
      }).then((res) => {
        console.log(res);
        this.arrs = res.data.goods;
        this.arrsd = res.data.goods;
        this.total = res.data.total;
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.select = "";
          this.rellist = {};
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },
    // 获取每页的数量
    changepage(val) {
      console.log(val + "页");
      this.pagenum = val;
      this.goodss();
    },
    // 获取多少页
    pagesn(val) {
      this.pagesize = val;
      this.goodss();
    },
    // 删除
    dels(id) {
      this.$http.delete(`goods/${id}`).then((res) => {
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.select = "";
          this.rellist = {};
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
        this.goodss();
      });
    },
    // 修改
    amends(row) {
      this.flag = true;
      this.form.goods_name = row.goods_name;
      this.form.goods_price = row.goods_price;
      this.form.goods_number = row.goods_number;
      this.form.goods_weight = row.goods_weight;
      this.form.goods_introduce = row.goods_introduce;
      this.form.id = row.goods_id;
    },
    // 确认修改
    confirm() {
      this.$http
        .put(`goods/${this.form.id}`, {
          goods_name: this.form.goods_name,
          goods_price: this.form.goods_price,
          goods_number: this.form.goods_number,
          goods_weight: this.form.goods_weight,
          goods_introduce: this.form.goods_introduce,
          pics: this.form.pics,
          attrs: this.form.attrs,
        })
        .then((res) => {
          console.log(res);
          if (res.meta.status == 200) {
            this.$message({
              message: res.meta.msg,
              type: "success",
            });
            this.select = "";
            this.rellist = {};
          } else {
            this.$message({
              message: res.meta.msg,
              type: "error",
            });
          }
        });
      this.goodss();
      this.flag = false;
    },
     //封装的请求的数据
    getroles() {
      this.$http.get("/roles").then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    //添加按钮
    AddFormVisible() {
      console.log(this.form.roleName);
      this.$http({
        url: "/roles",
        method: "post",
        data: {
          roleDesc: this.form.roleDesc,
          roleName: this.form.roleName,
        },
      }).then((res) => {
        console.log(res);
        if (res.meta.status != 201) {
          this.$message({
            type: "errot",
            message: res.meta.msg,
          });
        } else {
          this.$message({
            type: "success",
            message: res.meta.msg,
          });
          this.form = {
            roleName: "",
            roleDesc: "",
          };
          this.dialogFormVisible = false;
          this.getroles();
        }
      });
    },
  },
  filters: {
    filtime(val) {
      var time = "";
      if (val) {
        var date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();
        time = `${year}-${month}-${day}${hour}:${min}:${sec}`;
        // time=`${year}-${month}-${day}${hour}:${min}:${sec}`;
      }
      return time;
    },
  },
};
</script>

<style scoped>
.category-container {
  min-height: 100%;
  min-width: 100%;
}
</style>
